<template>
  <div class="_more" @click="clickMore">{{!up?'展开':'收起'}}<i class="down" :class="{'up':up}"></i></div>
</template>
<script>
export default {
  data(){
    return {
      up:false,       //小箭头默认往下
    }
  },
  methods:{
    clickMore(){
      this.up = !this.up
      this.$emit('seeMore',this.up)    //触发父组件传入的方法，参数为true/false，是否要查看更多
    }
  }
}
</script>
<style lang="stylus">
._more
  display flex;
  font-size: 14px;
  align-items center;
  justify-content center;
  width: 76px;
  height: 30px;
  background-color: #ededed;
  color: #333333;
  margin 40px auto 0 auto
  .down
    margin-left 10px
    width 6px
    height 6px
    background-color: #1b1b1b;
    position relative;
    transition-duration 500ms
    transform rotate(-45deg)
    &:after
      position absolute
      content ''
      width 6px
      height 6px
      background-color: #ededed;
      left 1px
      bottom 1px
  .up
    transform rotate(135deg)
</style>
